/*****
colors from google design and bootstrap
*****/

$tint-grey = #e1e1e1
$grey = #bdbdbd
$dark-grey = #757575

$tint-blue = #4dabf5
$blue = #2196f3
$dark-blue = #207FDC

$bootstrap-grey = rgb(248, 248, 248)
$bootstrap-green = #5cb85c
$bootstrap-yellow = #f0ad4e
$bootstrap-red = #d9534f
$bootstrap-black = #222

$white = #fff

/*****  global  *****/

[v-cloak] {
  display: none;
}

*
  padding 0
  margin 0
  border 0
  list-style none
  text-decoration none

body
  padding-top 50px
  background url("./src/images/pixels.png")

blockquote
  p
    font-size 14px

.dropdown-menu
  a
    cursor pointer !important


/*****  main  *****/

#vue-memo
  border 1px solid $tint-grey
  box-shadow 0 0 4px 0 $tint-grey
  padding 0
  z-index 1

/*****  header  *****/

.navbar
  border-radius 0
  margin-bottom 0
  z-index 1
  cursor default
  user-select none
  -moz-user-select none
  -ms-user-select none
  -webkit-user-select none

  .navbar-right

    a
      cursor pointer

    .search-box
      width calc(100% - 24px)
      min-width 180px
      margin 6px 12px

  .dropdown-toggle
    position relative
    padding-right 45px !important
    transition .2s ease-in-out

    &:hover
      background rgb(231, 231, 231) !important

    &:after
      position absolute
      width 24px
      height 24px
      top 8px
      right 18px
      background url("./src/images/icons/icon-dropdown.png") 0 0 no-repeat
      content ' '
      opacity .6

      @media (min-width 768px)
        top 13px

  .count
    border-radius 5px
    float right
    margin-top 3px

  .current-category .count
    float none
    margin -2px 6px 0 9px


/*****  main  *****/

#memos
  min-height 800px
  margin-top 6px
  padding 0

.memo-container
  padding 6px
  float left

.memo
  position relative
  border 1px solid $grey
  border-radius 5px
  padding 9px
  background-color $white
  transition all .15s ease-in-out

  &:hover
    box-shadow 0 0 6px 0 $dark-grey

    .mark
      display block

  &[data-completed=true]
    border-color $tint-blue

    .mark
      display block

  .mark
    display none
    position absolute
    width 24px
    height 24px
    top -8px
    left -8px
    border-radius 50%
    background $tint-blue url("./src/images/icons/icon-done.svg") no-repeat 3px 3px
    background-size 18px 18px
    transition all .2s ease-in-out
    cursor pointer

    &:hover
      transform scale(1.2)

  .memo-heading
    position relative
    width 100%

    .tools
      float right
      margin-top 6px

      > li
        width 20px
        height 20px
        float left
        margin-left 10px
        opacity .5
        transition opacity .2s ease-in-out

        &:hover
          cursor pointer
          opacity 1

        &.edit
          background url("./src/images/icons/icon-edit.png") no-repeat 0 0

        &.delete
          background url("./src/images/icons/icon-delete.png") no-repeat 0 0

    .title
      display inline-block
      margin-top 6px
      margin-bottom 6px
      padding-bottom 6px
      border-bottom 1px solid $grey
      text-overflow ellipsis
      white-space nowrap
      overflow hidden
      max-width calc(100% - 60px)

  .memo-info
    margin 0 auto 12px
    color $dark-grey
    font-weight 300

    .category
      float right

  .content
    border 1px solid $bootstrap-grey
    bottom 12px
    overflow-y scroll
    text-overflow ellipsis

    &[data-type=doodle]
      overflow hidden

    img
      width 100%
      height 100%

/*****  layers  *****/

.cover-layer
  display none
  position absolute
  top 0
  left 0
  width 100%
  height 100%
  background-color $bootstrap-black
  opacity .5
  z-index 2

.editor-layer
  display none
  position absolute
  background-color #fff
  top 50%
  left 50%
  margin-left -142px
  margin-top -142px
  padding 10px
  border 1px solid $bootstrap-grey
  border-radius 3px
  box-shadow 0 0 6px 0 $bootstrap-grey
  z-index 3

  .editor-top
    position relative
    margin-bottom 10px
    width 100%

    .tools
      position absolute
      top 6px
      right 0

      > li
        width 20px
        height 20px
        float left
        margin-left 10px
        opacity .5
        transition opacity .2s ease-in-out

        &:hover
          cursor pointer
          opacity 1

        &.save
          background url("./src/images/icons/icon-save.png") no-repeat 0 0

        &.cancel
          background url("./src/images/icons/icon-cancel.png") no-repeat 0 0

    .editor-title
      width calc(100% - 140px)

      /html
        #edit-markdown
        #edit-doodle
          .editor-title
            width calc(100% - 60px)

    .select-category
      position absolute
      right 62px
      top 0
      transition all .2s ease-in-out

      .dropdown-menu
        min-width 0

  .text-content
    width 262px
    height 262px
    font-size 12px
    resize none

  .canvas-wrapper
    position relative
    width 262px
    height 262px
    border 1px solid $grey

    *
      cursor pointer

    .doodle-controllers
      position absolute
      top 6px
      right 6px

      > li
        float left
        width 24px
        height 24px
        opacity .5
        transition opacity .2s ease-in-out

        &:hover
          cursor pointer
          opacity 1

        &.undo
          background url("./src/images/icons/icon-undo.png") no-repeat 2px 2px
          background-size 83.3%

        &.redo
          background url("./src/images/icons/icon-redo.png") no-repeat 2px 2px
          background-size 83.3%

        &.clear
          background url("./src/images/icons/icon-clear.png") no-repeat 2px 2px
          background-size 83.3%

    .doodle-colors
      position absolute
      top 6px
      left 0
      padding 6px

      > li
        float left
        width 16px
        height 16px
        margin-left 6px
        border 2px solid $bootstrap-black
        border-radius 50%
        transition .2s ease-in-out

        &:hover,
        &.current
          box-shadow 0 0 6px $bootstrap-black
        &[data-color=green]
          background-color $bootstrap-green
        &[data-color=yellow]
          background-color $bootstrap-yellow
        &[data-color=red]
          background-color $bootstrap-red
        &[data-color=black]
          background-color $bootstrap-black
        &[data-color=white]
          background-color $white

    .doodle-content
      cursor pointer


/*****  reset  *****/

@media (max-width 768px)

  #memos
    padding 0 5px

  .memo-container
    padding 2px
    margin-top 0
    width 50%

@media (min-width 768px) and (max-width 992px)
  .memo-container
    width 33.3%


@media (min-width 992px) and (max-width 1200px)
  .memo-container
    width 25%


@media (min-width 1200px)
  .memo-container
    width 25%
